<template>
  <div id="layout">
    <el-container class="layout">

      <el-aside :width="asideWidth+''" :style="'background-color:#20222a;height:'+asideHeight+'px;'">
        <layout-sidebar :isCollapse="isCollapse" :menus="menus" ></layout-sidebar>
      </el-aside>

      <el-container>
        <el-header style="text-align: right;font-size: 12px">
          <layout-header></layout-header>
        </el-header>
        <layout-main-tabs></layout-main-tabs>
        <el-main :style="'height:'+mainHeight+'px;'">
          <layout-main-content></layout-main-content>
        </el-main>
          <!--<el-footer>Footer</el-footer>-->
      </el-container>
    </el-container>
  </div>
</template>


<script>
import axios from '@/common/js/axios'
import global from '@/common/components/Global'
import layoutHeader from './components/Header'
import layoutSidebar from './components/Sidebar'
import layoutMainTabs from './components/TabsMainHeader'
import layoutMainContent from './components/MainContent'
export default {
  name: 'Layout',
  components:{layoutHeader,layoutSidebar,layoutMainTabs,layoutMainContent},
  data(){
    return {
      asideWidth:200,
      asideHeight:'',
      isCollapse: false,
      mainHeight:'',
      menus:[]
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted(){
    this.getPermission()
  },

  destroyed(){
    window.removeEventListener('resize', this.getHeight)
  },

  methods: {
    getHeight(){
      this.asideHeight = document.body.clientHeight;
      this.mainHeight = this.asideHeight - 180;
    },
    getPermission(){
      let _this = this;
      axios({
        method: 'post',
        url:global.adminBackEndApi + '/sys/findPermission',
      }).then(response => {
        _this.menus = response.data.data;
      }).catch(err=>{
        console.log("234234234")
      })
    }


  }
}
</script>

<style>

  .el-main{
    margin-top: 0px;
    padding-top: 0px;
  }
  .el-tabs{

  }
  .el-header {
    left:0px;
    top:0px;
    width:100%;
    index-z:37;
    background-color:#20222a;
  }



</style>
